'use client';
import {
    modeBgColor,
    modeBgSoftColor,
    modeColor,
    modeSoftColor,
} from "@/constants/modes";
import {useFormState} from "@/lib/hooks";
import {signUpAction} from "@/app/signup/action";
import Link from "next/link";

const Login = () => {
    const [state, handleSubmit] = useFormState(signUpAction)


    return (
        <div
            className={
                "flex flex-col justify-center items-center h-[calc(94vh-3rem)]" +
                modeColor
            }
        >
            {/* wrapper */}
            <form onSubmit={handleSubmit}
                className={
                    "flex items-center flex-col py-5 px-[3.1rem] gap-[0.63rem]" +
                    modeSoftColor +
                    modeBgColor
                }
            >
                {/* title */}
                <h1 className="text-2xl font-extrabold">Sign up</h1>
                {/* input */}
                <input
                    placeholder="username"
                    name='name'
                    className="border-[1px] border-solid rounded-sm p-[0.63rem] w-full
                  dark:border-[#aaaaaa] border-[#606060] bg-transparent "
                />
                <input
                    placeholder="email"
                    type="email"
                    name='email'
                    className="border-[1px] border-solid rounded-sm p-[0.63rem] w-full
                  dark:border-[#aaaaaa] border-[#606060] bg-transparent "
                />
                <input
                    placeholder="password"
                    type="password"
                    name='password'
                    className="border-[1px] border-solid rounded-sm p-[0.63rem] w-full
                  dark:border-[#aaaaaa] border-[#606060] bg-transparent "
                />
                <button type={"submit"} disabled={state.loading}
                        className={
                            " disabled:bg-slate-500 disabled:cursor-not-allowed rounded-md border-none py-[0.63rem] px-5 bg-green-300 cursor-pointer font-medium " +
                            modeBgSoftColor + modeSoftColor
                        }
                >
                    Sign up
                </button>
            </form>
            {/* more */}
            <div>
                <span>already have a account? </span>
                <Link className={'text-blue-300'} href={'/signin'}>sign in</Link>
            </div>
            <div className={"flex text-xs mt-[0.63rem] " + modeSoftColor}>
                English(USA)
                {/* links */}
                <div className="ml-[3.1rem]">
                    {/* link */}
                    <span className="ml-[1.9rem]">Help</span>
                    <span className="ml-[1.9rem]">Privacy</span>
                    <span className="ml-[1.9rem]">Terms</span>
                </div>
            </div>
        </div>
    );
};

export default Login;
